<template>
  <div>
    <el-row type='flex' class="data-search" justify='end' align="middle">
      <!-- <el-col > -->
      <el-button size="small" type="primary" style="margin-right:35px" @click="AddUserDilog()">添加用户</el-button>
      <!-- </el-col> -->
    </el-row>
    <el-table v-loading="loading" :data="tableData" border :height="tableHeight" style="width: 100%">
      <el-table-column prop="userName" label="用户名" align="center">
      </el-table-column>
      <el-table-column prop="createDate" align="center" label="创建时间">
      </el-table-column>
      <el-table-column prop="expressDate" align="center" label="过期时间">
      </el-table-column>

      <el-table-column prop="visitToday" align="center" label="今日访问次数">
      </el-table-column>
      <el-table-column prop="visit" align="center" label="总访问次数">
      </el-table-column>
      <el-table-column prop="todayTime" align="center" label="今日在线时长(分钟)">
        <template slot-scope="props">
          {{props.row.todayTime}}
        </template>
      </el-table-column>
      <el-table-column prop="allTime" align="center" label="总在线时长(分钟)">
        <template slot-scope="props">
          {{props.row.allTime}}
        </template>
      </el-table-column>
      <el-table-column prop="fatherName" align="center" label="属于">
      </el-table-column>
      <el-table-column prop="status" align="center" width="100" label="状态">
        <template slot-scope="props">
          <el-button size="small" :type="props.row.status === -1 ?  'error' : 'primary'">{{props.row.status === -1 ?
            '禁用' : '可用'}}</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="160" label="操作">
        <template slot-scope="props">
          <el-button v-if="props.row.status === 1" type="warning" size="small" @click="jingyong(props.row.id,-1)">禁用
          </el-button>
          <el-button v-else type="info" size="small" @click="jingyong(props.row.id,1)">解禁</el-button>
          <el-button type="danger" size="small" @click="shanchu(props.row.id)">删除</el-button>
          <el-button type="primary" size="small" @click="gengxin(props.row)">更新</el-button>
<!--          <el-button type="info" size="small">解绑</el-button>-->
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-box" style="width: 100%">
      <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size"
        layout="total, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <el-dialog title="更新用户" width="500px" :visible.sync="dialogFormVisible">
      <el-form :model="selectedUser">
        <!--      <el-form-item label="过期时间" value-format-="yyyy-MM-dd HH:mm:ss" :label-width="400">-->
        <el-form-item label="过期时间" :label-width="400">
          <el-date-picker v-model="selectedUser.expressDate" type="date" style="width: 230px" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改密码" :label-width="400">
          <el-input placeholder="请输入密码" style="width: 230px" v-model="selectedUser.password" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateUser()">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加用户" width="500px" :visible.sync="addUserdialogFormVisible">
      <el-form :rules="rules" :model="AddUserForm" label-width="auto" ref="AddUserForm">
        <el-form-item label="用户名" label-width="auto" prop="userName">
          <el-input placeholder="请输入用户名" style="width: 230px" v-model="AddUserForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="expressDate" label="过期时间" value-format-="yyyy-MM-dd" label-width="auto">
          <el-date-picker v-model="AddUserForm.expressDate" type="date" style="width: 230px" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="密码" label-width="auto" prop="password">
          <el-input placeholder="请输入密码" style="width: 230px" v-model="AddUserForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="auto" prop="password1">
          <el-input placeholder="请确认密码" style="width: 230px" v-model="AddUserForm.password1" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser('AddUserForm')">提交</el-button>
          <el-button @click="resetForm('AddUserForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      const confirmPassword = (rule, value, callback) => {
        if (value !== this.AddUserForm.password) {
          callback(new Error('密码与第一次输入不一致!'))
        }
        callback()
      }
      return {
        loading: true,
        rules: {
          expressDate: [{ required: true, message: '请选择过期时间' }],
          userName: [{ required: true, message: '用户名不能为空' }],
          password: [{ required: true, message: '请输入密码' }],
          password1: [{ required: true, message: '确认密码' },
          { validator: confirmPassword, trigger: 'blur' }
          ],
        },
        AddUserForm: {
          password: ''
        },
        addUserdialogFormVisible: false,
        selectedUser: {

        },
        dialogFormVisible: false,
        total: 0,
        size: 10,
        currentPage: 1,
        tableData: [],
        tableHeight: "", //表格高度
      }
    },
    created () {
      this.getTableHeight();
    },
    mounted () {

      let _this = this;
      window.onresize = () => {
        if (_this.resizeFlag) {
          clearTimeout(_this.resizeFlag);
        }
        _this.resizeFlag = setTimeout(() => {
          _this.getTableHeight();
          _this.resizeFlag = null;
        }, 100);
      };
    },
    methods: {
      //获取表格高度
      getTableHeight () {
        let tableH = 210; //距离页面下方的高度
        let tableHeightDetil = window.innerHeight - tableH;
        if (tableHeightDetil <= 200) {
          this.tableHeight = 200;
        } else {
          this.tableHeight = window.innerHeight - tableH;
          this.size = Math.floor(this.tableHeight / 48)
        }

        this.getAllUser()
      },
      addUser (e) {
        this.$refs[e].validate((valid) => {

          if (valid) {
            this.axios.post(this.baseUrl + 'user/addUser', this.AddUserForm)
              .then(res => {
                var data = res.data
                if (data.code !== 200) {
                  this.$message.error(data.msg);
                } else {
                  this.$message.success(data.msg);
                }
                this.getAllUser();
                this.$refs[e].resetFields();
                this.addUserdialogFormVisible = false
              })
              .catch(err => {
                console.log(err)
              })
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields();
        this.addUserdialogFormVisible = false
      },
      AddUserDilog () {
        this.addUserdialogFormVisible = !this.addUserdialogFormVisible
      },

      handleCurrentChange (e) {
        this.currentPage = e
        this.getAllUser();
      },
      updateUser () {
        console.log('update', this.selectedUser.password)
        // 发起请求更改用户信息
        this.axios.post(this.baseUrl + 'user/updateUser', this.selectedUser)
          .then(res => {
            var data = res.data
            if (data.code !== 200) {
              this.$message.error(data.msg);
            } else {
              this.$message.success(data.msg);
            }
            this.getAllUser()
          })
          .catch(err => {
            console.log(err)
          })
        this.dialogFormVisible = false
      },
      gengxin (e) {
        this.selectedUser = e
        this.selectedUser.password = ''
        this.dialogFormVisible = true
      },
      jingyong (e, status) {
        var sta = status === 1 ? '解禁' : '禁用';
        this.$confirm('是否' + sta + '该用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.axios.get(this.baseUrl + 'user/setStatus?id=' + e + '&status=' + status)
            .then(res => {
              var data = res.data
              if (data.code !== 200) {
                this.$message.error(data.msg);
              } else {
                this.$message.success(data.msg);
              }
              this.getAllUser()
            })
            .catch(err => {
              console.log(err)
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      shanchu (e) {
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.axios.get(this.baseUrl + 'user/delete?id=' + e)
            .then(res => {
              var data = res.data
              if (data.code !== 200) {
                this.$message.error(data.msg);
              } else {
                this.$message.success(data.msg);
              }
              this.getAllUser()
            })
            .catch(() => {
            })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      getAllUser () {
        this.loading = true;
        this.axios.get(this.baseUrl + 'user/getAllUser?page=' + this.currentPage + '&size=' + this.size)
          .then(res => {
            var data = res.data
            console.log(data)
            if (data.code === 401) {
              this.$message.error(data.msg);
            }
            else if (data.code === -1) {
              this.$message.error('获取用户信息失败！', data.msg);
            }
            else {

              for (var i = 0; i < data.data.records.length; i++) {
                data.data.records[i].createDate = this.$moment(data.data.records[i].createDate).format('YYYY-MM-DD')
                data.data.records[i].expressDate = this.$moment(data.data.records[i].expressDate).format('YYYY-MM-DD')

              }
              this.tableData = data.data.records
              this.currentPage = data.data.current
              this.total = data.data.total
              this.size = data.data.size
              this.loading = false;
              console.log('thisLoading:', this.loading)
            }
          })
          .catch(() => {

          })
      }
    }
  }
</script>

<style scoped>

</style>
